<template>
    <div>
        <div class="yContainerRowCenter_v" style="margin-bottom: 10px">
            <my-search @onSearch="initData"/>
            <div class="yWeight"/>
            <el-button type="primary" icon="Plus" @click="$refs.float_addProduct.show()">新增商品</el-button>
        </div>
        <el-table :data="models" stripe border max-height="700">
            <el-table-column fixed align="center" prop="id" label="ID" width="80"/>
            <el-table-column align="center" prop="title" label="名称" width="150"/>
            <el-table-column align="center" label="封面" width="100">
                <template #default="scope">
                    <div class="yContainerRowCenter">
                        <img v-viewer :src="scope.row.img" style="width: 50px;height: 50px;object-fit: cover"/>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="count_sale" label="总销量" width="100"/>
            <el-table-column align="center" prop="des" label="短描述" width="100"/>
            <el-table-column align="center" prop="params_xinghao" label="型号" width="100"/>
            <el-table-column align="center" prop="params_pinpai" label="品牌" width="100"/>
            <el-table-column align="center" label="支持退换" width="90">
                <template #default="scope">
                    <span> {{ scope.row.params_tuihuan === 1 ? "是" : "否" }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="价格区间" width="200">
                <template #default="scope">
                    <span>{{ `${(scope.row.money_min / 100).toFixed(2)}元` }}</span>
                    <span style="margin: 0 5px;">～</span>
                    <span>{{ `${(scope.row.money_max / 100).toFixed(2)}元` }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="content_like" label="短评" width="150"/>
            <el-table-column fixed="right" align="center" label="操作" width="150">
                <template #default="scope">
                    <div class="yContainerRowCenter">
                        <el-link type="primary" @click="doEdit(scope.row)" style="margin-right: 5px;">编辑</el-link>
                        <el-link type="primary" @click="showSKU(scope.row)" style="margin-right: 5px;">规格</el-link>
                        <el-link type="danger" @click="doDelete(scope.row)">删除</el-link>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <my-pagination :total="total" :page-size="pageSize" @onPageChange="goPage"/>
        <float_addProduct ref="float_addProduct" @onSuccess="initData()"/>
    </div>
</template>

<script>
import float_addProduct from "/src/views/page_product/float_addProduct.vue";

let $this, yFree, Global, IJkid, IFinal, AppUtils;

export default {
    components: {float_addProduct},
    data() {
        return {
            page: 1, pageSize: 5, models: [], total: 0,
        }
    },
    beforeCreate() {
        $this = this, yFree = $this.yFree, Global = $this.Global, IJkid = $this.IJkid, IFinal = $this.IFinal, AppUtils = $this.AppUtils;
    },
    created() {
        $this.initData();
    },
    methods: {
        initData(searchContent) {
            yFree.yPost($this, IJkid.spu_list, {
                "page": $this.page.toString(),
                "pageSize": $this.pageSize.toString(),
                "searchContent": searchContent ?? "",
            }, (results) => {
                let result = results[0];
                $this.total = result.total;
                $this.models = result.items;
            }, (code, message) => {
                yFree.yShowBuilder(`数据加载失败，是否重试？`, (isConfirm) => {
                    if (isConfirm) $this.initData();
                });
            });
        },
        goPage(page) {
            $this.page = page;
            $this.initData();
        },
        doEdit(model) {
            $this.$refs.float_addProduct.show(model);
        },
        showSKU(model) {

        },
        doDelete(model) {
            yFree.yShowBuilder(`是否删除《${model.title}》?`, (isConfirm) => {
                if (isConfirm) {
                    yFree.yPost($this, IJkid.spu_delete, {
                        "id": model.id.toString(),
                    }, (isSuccess, results) => {
                        if (isSuccess) {
                            yFree.yToast("删除成功");
                            $this.initData();
                        }
                    });
                }
            });
        },
    },
};
</script>

<style scoped>
</style>
